{% extends 'base.html' %}

{% block content %}
{% csrf_token %}

<div>
  <h2 class="text-3xl font-semibold text-center text-gray-800 my-6">Importation des Stocks d'ouverture</h2>
  
  <div>
     <label for="mois_annee" ><input type="radio" name="choice" value="erp" checked>A partir de l'ERP</label>
     <label for="mois_annee"> <input type="radio" name="choice" value="excel"> A partir d'un fichier Excel</label>
  </div>
  <label for="mois_annee" id = "labmois">Mois et année :</label>
  <input type="month" id="mois_annee" name="mois_annee">

  <input id="fileInput" type="file" accept=".xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
  <button id="btnImporter">Importer</button>

  <div id="info" style="margin-top:10px;"></div>
  <div id="preview"></div>
</div>

<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>

<script>


  const radios = document.querySelectorAll('input[name="choice"]');
  const labmois = document.getElementById('labmois');
  const mois_annee = document.getElementById('mois_annee');
  const fileInput = document.getElementById('fileInput');

  // Fonction pour mettre à jour l’affichage
  function updateVisibility() {
    const selected = document.querySelector('input[name="choice"]:checked').value;

    if (selected === 'excel') {
      labmois.style.display = 'inline-block';
      mois_annee.style.display = 'inline-block';
      fileInput.style.display = 'inline-block';
    } else {
      labmois.style.display = 'none';
      mois_annee.style.display = 'none';
      fileInput.style.display = 'none';
    }
  }

  // Cacher par défaut
  labmois.style.display = 'none';
  mois_annee.style.display = 'none';
  fileInput.style.display = 'none';

  // Sur changement de radio
  radios.forEach(radio => {
    radio.addEventListener('change', updateVisibility);
  });

  const input = document.getElementById('fileInput');
  const btn = document.getElementById('btnImporter');
  const info = document.getElementById('info');
  const preview = document.getElementById('preview');

  const allowedExt = ['.xls', '.xlsx'];
  const allowedMime = [
    'application/vnd.ms-excel',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  ];

  let selectedFile = null; // fichier mémorisé

  function showError(msg) {
    info.innerHTML = '<div class="error" style="color:red;">' + msg + '</div>';
    preview.innerHTML = '';
  }

  function clearInfo() {
    info.innerHTML = '';
    preview.innerHTML = '';
  }

  function normalizeDate(dateValue) {
    if (!dateValue) return '';
    if (typeof dateValue === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(dateValue)) {
      return dateValue;
    }
    if (typeof dateValue === 'string' && /^\d{1,2}\/\d{1,2}\/\d{2}$/.test(dateValue)) {
      let [month, day, year] = dateValue.split('/').map(v => parseInt(v, 10));
      if (year < 100) year = 2000 + year;
      return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    }
    return dateValue;
  }

  // 🟢 Étape 1 : mémoriser le fichier choisi
  input.addEventListener('change', (e) => {
    selectedFile = e.target.files[0];
    if (selectedFile) {
      info.innerHTML = `<div>Fichier sélectionné : <strong>${selectedFile.name}</strong></div>`;
    } else {
      info.innerHTML = '<div style="color:red;">Aucun fichier sélectionné.</div>';
    }
  });

  // 🟢 Étape 2 : lancer le traitement seulement quand on clique sur "Importer"
  btn.addEventListener('click', async () => {


    const selected = document.querySelector('input[name="choice"]:checked');

    if (selected) 
    {
      console.log('Valeur sélectionnée :', selected.value);
      if (selected.value=="erp")
      {
        $.ajax({
                url: '/Save_Stock_Prevu/',
                type: 'POST',
                data: {
                  csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (response) {

                  alert(response['message'])
                window.location.href = '/index/';
                },
                error: function (xhr, status, error) {
                console.error("Erreur: " + error);
                showError("Erreur lors de la récupération des stock depuis l'ERP : " + error);
                }
            }); 
      }
      else
      {
        const mois_annee = document.getElementById('mois_annee').value;
        if (!mois_annee) {
            showError("Veuillez sélectionner le mois et l'année avant d'importer.");
            return;
        }

        if (!selectedFile) {
          showError('Veuillez d\'abord sélectionner un fichier Excel.');
          return;
        }

        clearInfo();

        const name = selectedFile.name || '';
        const lower = name.toLowerCase();
        const ext = lower.slice(lower.lastIndexOf('.'));
        const mime = selectedFile.type || '';

        // Validation du type
        if (!allowedExt.includes(ext) && !allowedMime.includes(mime)) 
        {
          showError('Type de fichier non autorisé. Sélectionnez un fichier .xls ou .xlsx.');
          return;
        }

        try 
        {

          console.log("Mois/Année sélectionné :", mois_annee);
          const tab = mois_annee.split('-')
          console.log("Mois",tab[0],"/Année sélectionné :", tab[1]);

          const data = await selectedFile.arrayBuffer();
          const workbook = XLSX.read(data, { type: 'array' });
          const firstSheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[firstSheetName];

          const rows = XLSX.utils.sheet_to_json(worksheet, {
              header: 1,
              raw: false,
              dateNF: 'yyyy-mm-dd'
          });

          let annee = tab[0];
          let mois = tab[1];
          
          let liste_products = [];

          rows.forEach((row, rowIndex) => {
              if (rowIndex !== 0)
              {
                  liste_products.push(
                      {
                          code: row[0],
                          name: row[1],
                          quantite: row[2]
                      }
                  );
              }
          });
          console.log("data", liste_products);
          // Envoi au backend Django
          $.ajax({
              url: '/Import_Stock_Init/',
              type: 'POST',
              data: {
              annee: annee,
              mois: mois,
              articles: JSON.stringify(liste_products),
              csrfmiddlewaretoken: '{{ csrf_token }}'
              },
              success: function (response) {
              window.location.href = '/index/';
              },
              error: function (xhr, status, error) {
              console.error("Erreur: " + error);
              showError("Erreur lors de l'importation : " + error);
              }
          }); 

        } 
        catch (err) 
        {
          console.error(err);
          showError('Impossible de lire le fichier côté client. ' + err);
        } 
      }
    } 
    else 
    {
      console.log('Aucune option sélectionnée');
    }


    
  });
</script>

{% endblock %}